<template>
	<div>
		<Title></Title>
		<ul style="padding-top: .9rem">
			<li v-for="(item,i) in text" :key="i" @click="site(i)">
				<p v-text="item"></p>
			</li>
		</ul>
		<footer @click="quit">
			<p>退出账号</p>
		</footer>
	</div>
</template>

<script type="text/ecmascript-6">
    import Title from "../components/Title";
    export default {
        components: {//注册组件不然不能使用
            Title
        },
	    data(){
            return {
                text:["地址管理","经营证照","协议规则","小米商城用户协议","小米账号使用协议","隐私政策"]
            }
	    },
	    methods:{
            getUser(){//获取用户名
                let cookie = document.cookie.split(";");
                let user = null;
                if(cookie.length){
                    for(let i=0;i<cookie.length;i++){
                        let arr = cookie[i].split("=");
                        if(arr[0] === "userinfo"){
                            user = arr[1];
                        }
                    }
                }
                return user;
            },
		    delUser(name){
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                if(this.getUser()!=null)document.cookie= name + "="+this.getUser()+";expires="+exp.toGMTString();
		    },
            quit(){
                this.delUser('userinfo');/*退出账号*/
                setTimeout(()=>{
                    window.location.reload(true);
                },200);
            },
		    site(i){//跳转用户地址页
                if(i ===0){
                   this.$router.push({path:"/addressed",query:{user:this.getUser()}});
                }
		    }
	    },
	    created(){
			if(!this.getUser()){//组件创建如果没登录跳转登录页
				this.$router.push({path:"/profile"})
			}
	    },
	    mounted(){

	    },
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
	ul
		li
			width: 100%;
			display: inline-block;
			padding: .2rem;
			border-bottom: 1px solid #eee;
			box-sizing: border-box;
			position: relative;
			text-align: left;
			color: #3c3c3c;
			font-size .3rem
		li:after
			content: " ";
			position: absolute;
			width: .14rem;
			height: .14rem;
			right: .14rem;
			top: 50%;
			margin-top: -.07rem;
			border-right: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			text-decoration: inherit;
			vertical-align: inherit;
	footer
		background-color: #f4f4f4;
		text-align: center;
		height: 1rem;
		line-height: 1rem;
		box-shadow: 0 3px 14px 2px rgba(0,0,0,.12);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		p
			display: block;
			width: 100%;
			height: 100%;
			font-size: .3rem;
			color: #3c3c3c;
</style>